import { Button, Form, Input, Select, DatePicker } from 'antd';
import { CaretDownOutlined } from '@ant-design/icons';
const { RangePicker } = DatePicker;
import React, { ReactNode, useState } from 'react';
import styled from '@emotion/styled';
import { useTranslation } from 'react-i18next';

export interface ISearchHeader {
	id: number;
	label: string;
	type: string;
	key: string;
	width: string;
	options?: {
		key: string;
		value: string;
	}[];
	placeholder: string | string[];
}

const SelectContainer = styled.div`
	display: flex;
	align-items: center;
	border: 1px solid #d9d9d9;
	padding: 0px 11px;
`;

const FormItem = styled(Form.Item)`
	padding-bottom: 14px;
`;

const SearchHeader = (props: { searchParams: ISearchHeader[]; submitSearch: (params: any) => void }) => {
	const { t } = useTranslation();
	const [form] = Form.useForm();
	const [, forceUpdate] = useState({});

	const onFinish = (values: any) => {
		console.log('Finish:', values, form);
		props.submitSearch(values);
	};

	const renderItem = (): ReactNode => {
		const { searchParams } = props;
		return searchParams.map(item => {
			return (
				<FormItem name={item.key} key={item.id}>
					{filterItem(item)}
				</FormItem>
			);
		});
	};

	const handlerChange = (value: string, key: string) => {
		form.setFieldValue(key, value);
	};

	const filterItem = (item: {
		id: number;
		label: string;
		type: string;
		key: string;
		width: string;
		i18nKey: string;
		options?: {
			key: string;
			value: string;
			i18nKey: string;
		}[];
		placeholder: string | string[];
	}): ReactNode => {
		if (item.type === 'input') {
			return <Input prefix={<span className="form-item-label">{t(`${item.i18nKey}`) + '：'}</span>} placeholder={t(`${item.placeholder}`) as string} style={{ width: item.width }} />;
		}
		if (item.type === 'date') {
			return (
				<RangePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder={[t(`${item.placeholder[0]}`), t(`${item.placeholder[1]}`)]} suffixIcon={<span>-</span>} style={{ width: item.width }} />
			);
		}
		if (item.type === 'select') {
			return (
				<SelectContainer style={{ width: item.width }}>
					<span className="form-item-label">{t(`${item.i18nKey}`) + '：'}</span>
					<Select
						placeholder={item.placeholder}
						suffixIcon={<CaretDownOutlined />}
						bordered={false}
						style={{ width: '70%' }}
						defaultValue={t('all')}
						onChange={value => handlerChange(value, item.key as string)}
					>
						{item.options?.map(option => (
							<Select.Option key={option.key} value={option.key}>
								{t(`${option.i18nKey}`)}
							</Select.Option>
						))}
					</Select>
				</SelectContainer>
			);
		}
		if (item.type === 'button') {
			return item.key === 'submit' ? (
				<Button htmlType="submit" type="primary">
					{t(`${item.i18nKey}`)}
				</Button>
			) : (
				<Button onClick={() => form.resetFields()}> {t(`${item.i18nKey}`)}</Button>
			);
		}
	};

	return (
		<div className="search-header-wrapper">
			<Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
				{renderItem()}
			</Form>
		</div>
	);
};

export default SearchHeader;
